<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const hiddenPopop = ref(null); // 隐藏的弹出框
const topTabBar = ref(null);// 顶部tabbar实例
const userDept = ref(null)// 用户部门实例
const moreTab = ref(null)// 更多应用实例
const userPicture = ref(null)// 用户信息实例
const popupType = ref('');// 弹出框类型 dept: 部门 more: 更多应用 user: 用户信息
// 在生命周期中监听userDept moreTab userPicture的hover事件 切换hiddenPopop的显示和位置
onMounted(() => {
    userDept.value.addEventListener('mouseenter', () => {
        popupType.value = 'dept';
        setTimeout(() => {
            hiddenPopop.value.style.display = 'block';
            hiddenPopop.value.style.left = 0 + 'px';
        }, 0);
    });
    moreTab.value.addEventListener('mouseenter', () => {
        popupType.value = 'more';
        setTimeout(() => {
            hiddenPopop.value.style.display = 'block';
            hiddenPopop.value.style.left = moreTab.value.offsetLeft + 'px';
        }, 0);
    });
    userPicture.value.addEventListener('mouseenter', () => {
        popupType.value = 'user';
        setTimeout(() => {
            hiddenPopop.value.style.display = 'block';
            hiddenPopop.value.style.left = topTabBar.value.clientWidth - hiddenPopop.value.clientWidth + 'px';
        }, 0);
    });
    // 如果鼠标离开了hiddenPopup区域时隐藏hiddenPopop， 进入hiddenPopop区域或子元素时不隐藏
    hiddenPopop.value.addEventListener('mouseleave', () => {
        hiddenPopop.value.style.display = 'none';
    });
});
const tabBarClick = (e) => {
    // 找到已经被选择的tabbar
    document.querySelector('.top-tab-bar-item-chose')?.classList.remove('top-tab-bar-item-chose');
    // 将当前点击的tabbar设置为选中状态
    e.currentTarget.classList.add('top-tab-bar-item-chose');
}
// tab的数据
const tabList = [
    { name: '首页', path: '/index/home', default: true },
    { name: '线索', path: '/index/clue' },
    { name: '合同', path: '/index/contract' },
    { name: '订单', path: '/index/order' },
    { name: '客户', path: '/index/customer' },
    { name: '收费', path: '/index/charge' },
    { name: '报表', path: '/index/stat' },
    { name: '合规', path: '/index/compliance' },
    { name: '开票', path: '/index/invoice' },
    { name: '产品', path: '/index/product' },
];
// 获取当前请求路径，设置对应tab为选中状态
onMounted(() => {
    var path = route.path;
    tabList.forEach((item) => {
        if(path.startsWith(item.path)) {
            item.default = true;
        } else {
            item.default = false;
        }
    });
});
// 部门选择框的数据
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
]
const selectDept = ref('Option1'); // 选择的部门
const deptChange = (e) => {
    selectDept.value = e.target.value;
}
// 菜单列表
const menuList = [
    {
        title: '运营管理',
        list: [
            { name: '线索', icon: 'clue', path: '/index/invoice' },
            { name: '合同', icon: 'contract', path: '/index/invoice' },
            { name: '订单', icon: 'order', path: '/index/invoice' },
            { name: '客户', icon: 'customer', path: '/index/invoice' },
            { name: '收费', icon: 'charge', path: '/index/invoice' },
            { name: '报表', icon: 'report', path: '/index/invoice' },
            { name: '合规', icon: 'compliance', path: '/index/invoice' },
            { name: '开票', icon: 'invoice', path: '/index/invoice' },
            { name: '产品', icon: 'product', path: '/index/invoice' },
        ]
    },
    {
        title: '智能开票',
        list: [
            { name: '发票管理', icon: 'invoice-manage', path: '/index/invoice' },
            { name: '发票查验', icon: 'invoice-check', path: '/index/invoice' },
            { name: '发票报销', icon: 'invoice-reimburse', path: '/index/invoice' },
            { name: '发票认证', icon: 'invoice-certify', path: '/index/invoice' },
            { name: '发票统计', icon: 'invoice-statistics', path: '/index/invoice' },
        ]
    },
    {
        title: '客服服务',
        list: [
            { name: '工单', icon: 'work-order', path: '/index/invoice' },
            { name: '知识库', icon: 'knowledge-base', path: '/index/invoice' },
            { name: '满意度', icon: 'satisfaction', path: '/index/invoice' },
            { name: '服务报告', icon: 'service-report', path: '/index/invoice' },
        ]
    },
    {
        title: '营销管理',
        list: [
            { name: '营销活动', icon: 'marketing-activity', path: '/index/invoice' },
            { name: '营销线索', icon: 'marketing-clue', path: '/index/invoice' },
            { name: '营销报表', icon: 'marketing-report', path: '/index/invoice' },
        ]
    },
    {
        title: '游戏助手',
        list: [
            { name: '游戏管理', icon: 'game-manage', path: '/index/invoice' },
            { name: '游戏充值', icon: 'game-recharge', path: '/index/invoice' },
            { name: '游戏统计', icon: 'game-statistics', path: '/index/invoice' },
        ]
    }
];
// 显示的菜单列表 共三列
const showMenuList = ref([
    [],
    [],
    []
])
// 初始化更多菜单信息
onMounted(() => {
    /**
     *  遍历menuList, 根据showMenuList中元素中的list总长度
     *  决定遍历的menuList放在哪一列
     */
    menuList.forEach((item) => {
            var col = 0;
            var lastLength = 0;
            for (let i = 0; i < showMenuList.value.length; i++) {
                var currentLength = 0;
                for(let j = 0; j < showMenuList.value[i].length; j++) {
                    currentLength += showMenuList.value[i][j].list.length;
                }
                if(i === 0) {
                    lastLength = currentLength;
                } else {
                    if(currentLength < lastLength) {
                        lastLength = currentLength;
                        col = i;
                    }
                }
            }
            showMenuList.value[col].push(item);
        });
    });
</script>

<template>
    <div class="index">
        <div class="top-tab-bar" ref="topTabBar">
            <div ref="userDept" class="top-user-dept">
                {{ selectDept }}
            </div>
            <div class="top-tab-bar-list">
                <router-link v-for="(item, index) in tabList" :key="index" :to="item.path">
                    <div class="top-tab-bar-item" :class="{ 'top-tab-bar-item-chose': item.default }" @click="tabBarClick">
                        {{ item.name }}
                    </div>
                </router-link>
                <div ref="moreTab" class="top-tab-bar-item top-tab-bar-item-more">
                    更多应用
                </div>
            </div>
            <div class="top-user-info">
                <div class="continue-pay">续费</div>
                <div class="notice-icon">
                    <img src="../../assets/icon/notice.png" alt="">
                </div>
                <div class="user-picture" ref="userPicture">
                    <div class="picture">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.JKAOWcVsAT4_-ac9QlmekAAAAA?w=214&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="">
                    </div>
                    <div class="show-all-btn">
                        <img src="../../assets/icon/down.png" alt="">
                    </div>
                </div>
            </div>
            <div ref="hiddenPopop" class="hidden-popup">
                <div class="user-dept-detail" v-show="popupType === 'dept'">
                    <select name="" id="" @change="deptChange($event)">
                        <option 
                            v-for="item in options" 
                            :value="item.value"
                            :key="item.value">
                            {{ item.label }}
                        </option>
                    </select>
                </div>
                <div class="user-info-detail" v-show="popupType === 'user'">
                    <div class="top">
                        <div class="picture">
                            <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.JKAOWcVsAT4_-ac9QlmekAAAAA?w=214&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="">
                        </div>
                        <div class="name">{{ selectDept }}</div>
                    </div>
                    <div class="user-function">
                        <div class="function-item">邀请同事</div>
                        <div class="function-item">部门及员工设置</div>
                        <div class="function-item">机构设置</div>
                        <div class="function-item">个人设置</div>
                        <div class="function-item">系统设置</div>
                        <div class="function-item">意见设置</div>
                    </div>
                </div>
                <div class="more-tab" v-show="popupType === 'more'">
                    <div class="menu-list" v-for="(item, index) in showMenuList" :key="index">
                        <div class="menu-item" v-for="(subItem, i) in item" :key="i">
                            <div class="title">{{ subItem.title }}</div>
                            <div class="item" v-for="(it, z) in subItem.list" :key="z">
                                <router-link :to="it.path">
                                    <div class="name">{{ it.name }}</div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="router-view">
            <router-view/>
        </div>
    </div>
</template>

<style scoped lang="less">
.index {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.top-tab-bar {
    --font-size: 16px;
    width: 100%;
    height: 50px;
    background-color: rgb(55,62,84);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    gap: 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 99999;
    .hidden-popup {
        position: absolute;
        top: 50px;
        left: 0;
        box-shadow: 0 3px 8px 0px #ddd;
        display: none;
        transition: all 0.3s ease;
        z-index: 999;
        .user-dept-detail {
            width: 280px;
            background-color: #fff;
            box-sizing: border-box;
            padding: 5px 10px;
            select {
                width: 100%;
                height: 40px;
                border: 2px solid rgba(255,128,64);
                border-radius: 5px;
                &:active, &:focus {
                    outline: none;
                    border-color: rgba(255,128,64);
                }
            }
        }
        .user-info-detail {
            width: 200px;
            background-color: #fff;
            box-sizing: border-box;
            .top {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px;
                border-bottom: 1px solid #eee;
                box-sizing: border-box;
                .picture {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .name {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            .user-function {
                .function-item {
                    height: 40px;
                    line-height: 40px;
                    padding: 0 10px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #eee;
                    cursor: pointer;
                    &:hover {
                        background-color: #f5f5f5;
                    }
                }
            }
        }
        .more-tab {
            width: 400px;
            background-color: #fff;
            display: flex;
            gap: 10px;
            box-sizing: border-box;
            padding: 10px;
            .menu-list {
                flex: 1;
                .menu-item {
                    margin-bottom: 10px;
                    .title {
                        font-size: 18px;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 5px;
                    }
                    .item {
                        .name {
                            font-size: 16px;
                            color: #666;
                            padding: 5px 0;
                            cursor: pointer;
                            &:hover {
                                color: rgba(255,128,64);
                            }
                        }
                    }
                }
            }
        }
    }
    .top-user-dept {
        width: 160px;
        color: #fff;
        font-size: var(--font-size);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        user-select: none;
    }
    .top-tab-bar-list {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 20px;
        overflow: auto;
        box-sizing: border-box;
        .top-tab-bar-item {
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: var(--font-size);
            cursor: pointer;
            white-space: nowrap;
            position: relative;
            text-align: center;
            padding: 0 10px;
            &:hover {
                color: rgba(255,128,64);
            }
        }
        .top-tab-bar-item-chose {
            color: rgba(255,128,64);
            &::before {
                content: '';
                display: block;
                width: 40px;
                height: 4px;
                background-color: rgba(255,128,64);
                transition: width 0.3s ease;
                position: absolute;
                bottom: 5px;
                left: 50%;
                transform: translateX(-50%);
                opacity: 1;
            }
        }
        .top-tab-bar-item-more {
            position: relative;
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                right: -10px;
                transform: translateY(-50%);
                width: 0; 
                height: 0; 
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 5px solid #fff;
            }
        }
    }
    .top-user-info {
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
        color: #fff;
        font-size: var(--font-size);
        box-sizing: border-box;
        height: 100%;
        position: relative;
        padding: 0 10px;
        box-sizing: border-box;
        .continue-pay {
            width: 50px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: rgb(255,134,132);
            position: absolute;
            top: 0;
            left: 0;
        }
        .notice-icon {
            width: 24px;
            height: 24px;
            cursor: pointer;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .user-picture {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            .picture {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .show-all-btn {
                width: 16px;
                height: 16px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
}
.router-view {
    flex: 1;
    overflow: auto;
}
a {
    text-decoration: none;
    color: inherit;
}
</style>
